NaN （Not a Number）

NaN 也就是非數字，通常會出現在

1. 企圖對一些非數字的運算元做數字的運算，這時就會出現 NaN，例如：

   let myName = "Key";
   let myAge = 18;
   let total = myName * myAge;
   console.log(total); // NaN;
   

   因為字串跟數字是不能相乘的，是一個異常的狀況，這時候系統就會告訴你這是NaN。

2. 想要把一個不是數字的單字強制轉成數字，也會出現 NaN，例如：

   let myName = parseInt("Key"); // parseInt是一個把字串型別轉為數字型別的方法，後續會再更詳細介紹
   console.log(myName); // NaN;
   

有趣的是，如果用 typeof 運算子去查 NaN 本身，會顯示它是數字型別：

let myName = "Key";
let myAge = 18;
let total = myName * myAge;
console.log(total); // NaN;

console.log(typeof total); // number;

console.log(typeof NaN); // number;

字串處理方法

JavaScript 本身有提供很多語法，可以讓我們去處理字串、數字還有其他的項目，這邊會先介紹兩個常見的字串處理方法，更多的處理方式未來會再做介紹。

1. 查看字串長度（變數名稱 .length）

   let myName = 'Key';
   let yourName = 'idontknow';
   let hello = '你好嗎?';
   
   console.log(myName.length); // 3 
   console.log(yourName.length); // 9
   console.log(hello.length); // 4
   

2. 濾掉值頭尾空白（變數名稱 .trim()）

   let myName = '  K ey '; // 前面加上兩個空白，中間一個，後面一個
   
   console.log(myName.length); // 7 加上
   
   myName = myName.trim() // 使用 trim() 方法濾掉前後空白並重新賦予
   
   console.log(myName); // K ey 頭尾空白已被濾掉，剩中間的空白
   console.log(myName.length); // 4
   

   常見用於取 Email 或 電話的值，當有些人在輸入自己的信箱或電話時可能會不小心多打了空白鍵，這時候如果直接拿原本的資料去跟資料庫作比對會發現沒有相同的資料。所以就會用 trim() 這個方法去把頭尾的空白給濾掉，這樣才會跟資料庫的資料相同。

Value（值）的資料指向

前面我們學會了用字串處理方法 .length 取得值的字元長度

let myName = 'Key';
    
console.log(myName.length); // 3 

此時如果想要把長度的值拿來使用：

let myName = 'Key';
myName.length; 
// 就算在後面使用了方法，如果沒有為取出來的值為它指向一個變數

console.log(myName.length); // 3 
console.log(myName); // Key 就算呼叫原變數也只會得到原本的值

該怎麼做呢？我們可以為取出來的值指向一個變數，也就是用一個容器去把它裝起來，讓我們可以直接取用：

let myName = 'Key';
let myNameLength = myName.length; // 把 myName.length 運算出來的結果賦予到一個變數
    
console.log(myNameLength); // 3 

所以如果我們想運用使用方法取出來的值，我們只要宣告一個新的變數，並把該方法取出來的值賦予到變數就可以囉。

樣板字面值 （Template literals）

以往在連接各個字串或變數時，我們可能會用到大量的 + 號，這使得程式碼變得冗長且不好閱讀：

let today = '星期日';
let lunchFood = 'sushi';
let content = "這週的" + today + "中午吃了" + lunchFood; 

console.log(content); // 這週的星期日中午吃了sushi

ES6 提供了更方便好用的語法，叫做樣板字面值 （Template literals），一樣用上面的例子：

let today = '星期日';
let lunchFood = 'sushi';
let content = `這週的${today}中午吃了${lunchFood}`;

console.log(content); // 這週的星期日中午吃了sushi

在頭尾使用反引號包住整段文字，並且使用 ${} 來嵌入變數的值或算式，這樣下面跟上面會呈現一樣的效果，但下面的程式碼相對會簡潔地多

另外一個方便的地方是，傳統的字串如果想要拆成多行，我們需要加上一個斷行字母 /n

let today = '星期日';
let lunchFood = 'sushi';
let content = "這週的" + today + "中午/n吃了" + lunchFood; 

console.log(content); 
// 這週的星期日中午
// 吃了sushi

樣板字面值保留了程式碼中的斷行方式，所以不需要使用斷行字母也能達到相同的結果：

let today = '星期日';
let lunchFood = 'sushi';
let content = `這週的${today}中午
吃了${lunchFood}`;

console.log(content); 
// 這週的星期日中午
// 吃了sushi

目前的建議都是建議多習慣使用樣板字面值，可以大大提升寫程式碼的效率。

參考資料

線上課程
MDN